<template>
  <div class="dashboard-container">
    欢迎登陆到我的网站
    <div class="item">
      <h1 style="background-color:#FFFF00">学生人数:
      {{ studentCount }} </h1>
    </div>
    <div class="item">
      <h1 style="background-color:#FFFF00">学校统计
      : {{ schoolCount }} </h1>
    </div>
    <div class="item">
      <h1 style="background-color:#FFFF00"> 老师统计: {{ teacherCount }} </h1>
    </div>
    <div class="item">
      <h1 style="background-color:#FFFF00">班级统计: {{classCount}} </h1>  </div>
    <div class="item">
      <h1 style="background-color:#FFFF00">学院统计:{{ academyCount }} </h1>
    </div>
  </div>

</template>
<script>
import { mapGetters } from 'vuex'

export default {
  name: 'Dashboard',
  computed: {
    ...mapGetters([
      'name'
    ])
  },
  data() {
    return {
      students: {},
      schools: {},
      class: {},
      teachers: {},
      academys: {},
      classCount: '',
      teacherCount: '',
      academyCount: '',
      schoolCount: '',
      studentCount: ''
    }
  },
  mounted() {
    this.$http.get('/api/users/add').then(res => {
      console.log('this.panels', res)
    })
    this.$http.post('/api/student/get').then(res => {
      this.students = res
      this.studentCount = this.students.length
    })
    this.$http.post('/api/classs/get').then(res => {
      this.class = res
      this.classCount = this.class.length
    })
    this.$http.post('/api/teacher/get').then(res => {
      this.teachers = res
      this.teacherCount = this.teachers.length
    })
    this.$http.post('/api/academy/get').then(res => {
      this.academys = res
      this.academyCount = this.academys.length
    })
    this.$http.post('/api/school/get').then(res => {
      this.schools = res
      this.schoolCount = this.schools.length
    })
  }
}
</script>
<style lang="scss" scoped>
  .dashboard {
    &-container {
      margin: 30px;
    }
    &-text {
      font-size: 30px;
      line-height: 46px;
    }
  }</style>
